<template>
  <el-submenu :index="data.menuENName"  >
    <template slot="title"><i v-if="data.icon" class="iconfont" :class="data.icon"></i><span>{{data.menuZHName}}</span></template>
    <template v-for="c in data.children">
      <sub-menu :key="c.id" v-if="c.children.length" :data="c"></sub-menu>
      <el-menu-item :index="'/home/'+c.menuENName" :key="c.id" v-else>{{c.menuZHName}}</el-menu-item>
    </template>      
  </el-submenu>
</template>

<script>
export default {
  name: 'sub-menu',
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  }
}
</script>
